<template>
  <div>
    <div class='layerCondition'
         v-if='floorToggle'>
      <div class='now'
           @click='selectFloor(1)'>
        <div :class="{'floor-icon-open1':floor1,'floor-icon1':!floor1}"></div>
        <div :class="{active:floor1}">U1</div>
      </div>
      <div class='now'
           @click='selectFloor(2)'>
        <div :class="{'floor-icon-open2':floor2,'floor-icon2':!floor2}"></div>
        <div :class="{active:floor2}">U2</div>
      </div>
      <div class='now'
           @click='selectFloor (3)'>
        <div :class="{'floor-icon-open3':floor3,'floor-icon3':!floor3}"></div>
        <div :class="{active:floor3}">U3</div>
      </div>
      <div class='now'
           @click='selectFloor (4)'>
        <div :class="{'floor-icon-open4':floor4,'floor-icon4':!floor4}"></div>
        <div :class="{active:floor4}">U4</div>
      </div>
      <div class='now'
           @click='selectFloor (5)'>
        <div :class="{'floor-icon-open5':floor5,'floor-icon5':!floor5}"></div>
        <div :class="{active:floor5}">U5</div>
      </div>
    </div>

    <div class='layerCondition'
         v-if='useToggle'>
      <div class='now'
           @click='selectUse(1)'>
        <div :class="{'use-icon-open1':use1,'use-icon1':!use1}"></div>
        <div :class="{active:use1}">商业</div>
      </div>
      <div class='now'
           @click='selectUse(2)'>
        <div :class="{'use-icon-open2':use2,'use-icon2':!use2}"></div>
        <div :class="{active:use2}">交通</div>
      </div>
      <div class='now'
           @click='selectUse(3)'>
        <div :class="{'use-icon-open3':use3,'use-icon3':!use3}"></div>
        <div :class="{active:use3}">公共</div>
      </div>
      <div class='now'
           @click='selectUse(4)'>
        <div :class="{'use-icon-open4':use4,'use-icon4':!use4}"></div>
        <div :class="{active:use4}">居住</div>
      </div>
      <div class='now'
           @click='selectUse(5)'>
        <div :class="{'use-icon-open5':use5,'use-icon5':!use5}"></div>
        <div :class="{active:use5}">工业</div>
      </div>
      <div class='now'
           @click='selectUse(6)'>
        <div :class="{'use-icon-open6':use6,'use-icon6':!use6}"></div>
        <div :class="{active:use6}">市政</div>
      </div>
      <div class='now'
           @click='selectUse(7)'>
        <div :class="{'use-icon-open7':use7,'use-icon7':!use7}"></div>
        <div :class="{active:use7}">防灾</div>
      </div>
    </div>
    <div class='layerCondition'
         v-if='conditionToggle'>
      <div class='now'
           @click='selectNow'>
        <div :class="{'now-icon-open':nowOpen,'now-icon':nowClose}"></div>
        <div :class="{active:isActive1}">现状</div>
      </div>
      <div class='plan'
           @click='selectPlan'>
        <div :class="{'plan-icon-open':planOpen,'plan-icon':planClose}"></div>
        <div :class="{active:isActive2}">规划</div>
      </div>
    </div>
  </div>

</template>
<script>
import Bus from "../../components/utils/bus.js"

export default {
  name: 'condition',
  data () {
    return {
      nowOpen: false,
      nowClose: true,
      planOpen: false,
      planClose: true,
      isActive1: false,
      isActive2: false,
      floor1: true,
      floor2: true,
      floor3: true,
      floor4: true,
      floor5: true,
      floorToggle: false,
      useToggle: false,
      conditionToggle: true,
      use1: true,
      use2: true,
      use3: true,
      use4: true,
      use5: true,
      use6: true,
      use7: true,
    }
  },
  mounted () {
    Bus.$on('resetSelect', () => {
      if (this.useToggle || this.floorToggle) {
        this.useToggle = false
        this.floorToggle = false
        this.conditionToggle = true
      }

    })
    Bus.$on('singleFloor', e => {
      let c = Math.abs(e)
      switch (c) {
        case 110:
          this.floor1 = !this.floor1
          break;
        case 90:
          this.floor2 = !this.floor2
          break;
        case 70:
          this.floor3 = !this.floor3
          break;
        case 50:
          this.floor4 = !this.floor4
          break;
        case 30:
          this.floor5 = !this.floor5
          break;
      }
    })
    Bus.$on('singleType', e => {
      switch (e) {
        case '交通':
          this.use2 = !this.use2;
          break;
        case '公共':
          this.use3 = !this.use3;
          break;
        case '商业':
          this.use1 = !this.use1;
          break;
        case '居住':
          this.use4 = !this.use4;
          break;
        case '工业':
          this.use5 = !this.use5;
          break;
        case '市政':
          this.use6 = !this.use6;
          break;
        case '防灾':
          this.use7 = !this.use7;
          break;

      }
    }),
      Bus.$on('floorToggle', e => {
        if (e === '关闭楼层详情') {
          this.floorToggle = true
          this.useToggle = false
          this.conditionToggle = false
          this.floor1 = true
          this.floor2 = true
          this.floor3 = true
          this.floor4 = true
          this.floor5 = true
          this.floor6 = true
          this.floor7 = true
          Bus.$emit('closeUse', this.useToggle)
        } else {
          this.floorToggle = false
          this.conditionToggle = true
        }
      })
    Bus.$on('useToggle', e => {
      if (e === '关闭功能详情') {
        this.useToggle = true
        this.floorToggle = false
        this.conditionToggle = false
        this.use1 = true
        this.use2 = true
        this.use3 = true
        this.use4 = true
        this.use5 = true
        this.use6 = true
        this.use7 = true
        Bus.$emit('closeFloor', this.floorToggle)
      } else {
        this.useToggle = false
        this.conditionToggle = true
      }
    })
    Bus.$on('hidePlan', () => {
      this.nowOpen = false
      this.nowClose = true
      this.planOpen = false
      this.planClose = true
      this.isActive1 = false
      this.isActive2 = false
    })
  },
  methods: {
    // selectUse (e) {
    //   if (e === 1) {
    //     this.use1 = !this.use1
    //     Bus.$emit('selectUse', this.use1)
    //   } else if (e === 2) {
    //     this.use2 = !this.use2
    //     Bus.$emit('selectUse', this.use2)
    //   } else if (e === 3) {
    //     this.use3 = !this.use3
    //     Bus.$emit('selectUse', this.use3)
    //   } else if (e === 4) {
    //     this.use4 = !this.use4
    //     Bus.$emit('selectUse', this.use4)
    //   } else if (e === 5) {
    //     this.use5 = !this.use5
    //     Bus.$emit('selectUse', this.use5)
    //   } else if (e === 6) {
    //     this.use6 = !this.use6
    //     Bus.$emit('selectUse', this.use6)
    //   } else if (e === 7) {
    //     this.use7 = !this.use7
    //     Bus.$emit('selectUse', this.use7)
    //   }
    // },
    // // 传递参数过去
    // selectFloor (e) {
    //   console.log('执行一次传递')
    //   console.log(e)
    //   if (e === 1) {
    //     this.floor1 = !this.floor1
    //     Bus.$emit('selectFloor', this.floor1)
    //   } else if (e === 2) {
    //     this.floor2 = !this.floor2
    //     Bus.$emit('selectFloor', this.floor2)
    //   } else if (e === 3) {
    //     this.floor3 = !this.floor3
    //     Bus.$emit('selectFloor', this.floor3)
    //   } else if (e === 4) {
    //     this.floor4 = !this.floor4
    //     Bus.$emit('selectFloor', this.floor4)
    //   } else if (e === 5) {
    //     this.floor5 = !this.floor5
    //     Bus.$emit('selectFloor', this.floor5)
    //   }

    //   Bus.$emit('selectFloor', e)
    // },
    selectNow () {
      this.nowOpen = !this.nowOpen
      this.nowClose = !this.nowClose
      this.isActive1 = !this.isActive1
      Bus.$emit('selectNow', this.nowOpen)
    },
    selectPlan () {
      this.planOpen = !this.planOpen
      this.planClose = !this.planClose
      this.isActive2 = !this.isActive2
      Bus.$emit('selectPlan', this.planOpen)
    }
  }
}
</script>
<style lang="scss" >
$precent: 100vw / 1920;
// 显示隐藏图层状况
.layerCondition {
  width: 120 * $precent;
  padding: 10 * $precent 10 * $precent 20 * $precent 10 * $precent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("../../static/image/1/标识背景图.png") no-repeat;
  background-size: 100% 100%;
  > div {
    margin-bottom: 10 * $precent;
    .active {
      color: #fff000;
    }
  }
  .floor-icon-open1 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/地下一层打开.png") no-repeat;
    background-size: 100% 100%;
  }
  .floor-icon-open2 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/地下二层打开.png") no-repeat;
    background-size: 100% 100%;
  }
  .floor-icon-open3 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/地下三层打开.png") no-repeat;
    background-size: 100% 100%;
  }
  .floor-icon-open4 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/地下四层打开.png") no-repeat;
    background-size: 100% 100%;
  }
  .floor-icon-open5 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/地下五层打开.png") no-repeat;
    background-size: 100% 100%;
  }
  .floor-icon1 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/地下一层.png") no-repeat;
    background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .floor-icon2 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/地下二层.png") no-repeat;
    background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .floor-icon3 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/地下三层.png") no-repeat;
    background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .floor-icon4 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/地下四层.png") no-repeat;
    background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .floor-icon5 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/地下五层.png") no-repeat;
    background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .use-icon1 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/商业.png") no-repeat;
    background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .use-icon2 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/交通.png") no-repeat;
    background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .use-icon3 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/公共.png") no-repeat;
    background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .use-icon4 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/居住.png") no-repeat;
    background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .use-icon5 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/工业.png") no-repeat;
    background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .use-icon6 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/市政.png") no-repeat;
    background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .use-icon7 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/防灾.png") no-repeat;
    background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .use-icon-open1 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/商业打开.png") no-repeat;
    background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .use-icon-open2 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/交通打开.png") no-repeat;
    background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .use-icon-open3 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/公共打开.png") no-repeat;
    background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .use-icon-open4 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/居住打开.png") no-repeat;
    background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .use-icon-open5 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/工业打开.png") no-repeat;
    background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .use-icon-open6 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/市政打开.png") no-repeat;
    background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .use-icon-open7 {
    height: 23 * $precent;
    width: 43 * $precent;
    background: url("../../static/image/配色/防灾打开.png") no-repeat;
    background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .now {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    .now-icon-open {
      height: 23 * $precent;
      width: 43 * $precent;
      background: url("../../static/image/1/现状-打开.png") no-repeat;
      background-size: 100% 100%;
    }
    .now-icon {
      height: 23 * $precent;
      width: 43 * $precent;
      background: url("../../static/image/1/现状-关闭.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .plan {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 10 * $precent;
    .plan-icon-open {
      height: 23 * $precent;
      width: 43 * $precent;
      background: url("../../static/image/1/规划-打开.png") no-repeat;
      background-size: 100% 100%;
    }
    .plan-icon {
      height: 23 * $precent;
      width: 43 * $precent;
      background: url("../../static/image/1/规划-关闭.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>